import React from 'react';
import { connect } from 'dva';
import {Layout, Modal, Select, Table, Button, Row, Col, Checkbox, message,Input} from 'antd';
const { Option } = Select;
const { Search } = Input;
const { Header, Content } = Layout;

@connect(({ layerSetting }) => ({ layerSetting }))
class LayerSetting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      mapName: "配置",
      visible: false,
      tableColsList:[]
    };

  }

  showModal = (value,name) => {
    this.pubtabcolsList(value);
    this.setState({
      visible: true,
      mapName:name
    });
  };

  handleOk = e => {
    this.pubtabcolsUpdate();
    message.success('保存成功！');
    this.setState({
      visible: false,
    });
  };

  handleCancel = e => {
    this.setState({
      visible: false,
    });
  };

  componentDidMount(){
    this.init();
  }


  init = () => {
    this.mapConfigList();
  };

  //查询配置列表
  mapConfigList = (value) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'layerSetting/mapConfigList',
      payload: {mapName:value},
    });
  };
  //查询table字段列表
  pubtabcolsList = (tableId) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'layerSetting/pubtabcolsList',
      payload: {tableId:tableId},
    }).then(response => {
      if (response) {
        this.setState({
          tableColsList: response,
        });
      }
    });
  };
  //批量更新字段列表
  pubtabcolsUpdate = () => {
    const { dispatch } = this.props;
    const { tableColsList } = this.state;
    let columnIds = null;
    let tableId = null;
    let first = true
    for(var i = 0; i<tableColsList.length;i++){
      if(tableColsList[i].ifanalysis && tableColsList[i].ifanalysis ==1){
        if(first){
          tableId=tableColsList[i].tableId;
          columnIds += tableColsList[i].columnId;
          first = false;
        }else{
          columnIds += ","+tableColsList[i].columnId;
        }
      }
    }
    dispatch({
      type: 'layerSetting/pubtabcolsUpdate',
      payload: {tableId:tableId,columnIds:columnIds},
    });
  };

  onChange = e => {
    console.log('checked = ', e.target ? e.target.value: '');
    const { tableColsList } = this.state;
    for(var i = 0; i<tableColsList.length;i++){
      if(e.target.value == tableColsList[i].columnId){
        if(tableColsList[i].ifanalysis && tableColsList[i].ifanalysis ==1){
          tableColsList[i].ifanalysis = 0;
        }else{
          tableColsList[i].ifanalysis = 1
        }
        break;
      }
    }
    this.setState({
      tableColsList: tableColsList,
    });
  };


  columns = [
    {
      title: '图层名称',
      dataIndex: 'mapName',
      key: 'mapName',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Button type="dashed" onClick={()=>{this.showModal(record.tableId,record.mapName)}}>配置</Button>
      ),
    },

  ];


  render() {
    const { mapConfigList } = this.props.layerSetting;
    const { tableColsList } = this.state;
    let checkboxList = [];
    if (tableColsList && tableColsList.length > 0) {
      for(var i = 0; i<tableColsList.length;i++){
        let checked = tableColsList[i].ifanalysis && tableColsList[i].ifanalysis ==1;
        checkboxList.push(<Col style={{padding: '10px 0px'}} span={6}><Checkbox checked={checked} onChange={this.onChange} value={tableColsList[i].columnId || ''}>{tableColsList[i].description || ''}</Checkbox></Col>);
      }
    }else{
      checkboxList = (<p>无配置项</p>)
    }
    return (
      <Layout style={{ background: '#fff' }}>
        <Content style={{padding: '20px 30px', minHeight: 280 }}>
          <div style={{padding: '10px 30px 30px' }}>
            <Search
              placeholder="图层名称"
              onSearch={value => this.mapConfigList(value)}
              style={{ width: 300 }}
            />
          </div>
          <div>
          <Table pagination={{ pageSize: 6 }}
                 dataSource={mapConfigList}
                 columns={this.columns} />
          </div>
        </Content>
        <Modal
          title={this.state.mapName}
          visible={this.state.visible}
          width={800}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div  style={{height: '280px' }}>
            {checkboxList}
          </div>
        </Modal>
      </Layout>

    );
  }
}

export default LayerSetting;
